<template>
  <div :id="echartId" :style="customStyle"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, watch, defineProps } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  echartId: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    default: () => ({})
  },
  customStyle: {
    type: Object,
    default: () => ({ width: '100%', height: '100%' })
  },
  isHightLight: {
    type: Boolean,
    // default: true
  }
});

// 使用普通变量来存储ECharts实例
let chartInstance = null;
// let maxIndex = ref(null);
/**
 * 首次加载默认显示tooltip配置
 * @param { Number }seriesIndex
 * @param { Number }dataIndex
 */
const showTip = (options) => {
  if (!chartInstance) return
  //需要展示的echarts实例Id
  const showMaxTip = [
    'applySumId',
    'LineBottomRe',
    'applySumIdSecond',
    'TmsLineBottomRe',
    'TmsLineBottomReSecond',
    'TmsLineBottomReSecond7OpenCount',
    'TmsLineBottomReSecond7ActiveTerminal',
    'TmsFirstPageapplySumId',
    'TmsFirstLineBottomRe',
    'TmsFifhPageapplySumId'
  ]
  if (showMaxTip.includes(props.echartId)) {
    const array = options.series[0].data;
    // 使用 reduce 方法找到最大 value 的索引
    let maxIndex;
    switch (props.echartId) {
      case 'applySumId':
        maxIndex = array.reduce((maxIdx, current, index) => {
          return current.value > array[maxIdx].value ? index : maxIdx;
        }, 0);
        //sdk第一页应用启动总量分布；自定义title
        chartInstance.setOption({
          title: {
            text: array[maxIndex].name ? '{name|' + array[maxIndex].name + '} \n' + '{val|' + array[maxIndex].value.toLocaleString() + '}' + '{unit|' + '次' + '}' : '',
            textStyle: {
              rich: {
                val: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-35, 33, 0, 0]

                },
                name: {
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-60, 33, 0, 0],
                },
                unit: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-35, 33, 0, -30]
                }
              }
            }
          }
        })
        break;
      case 'applySumIdSecond':
        maxIndex = array.reduce((maxIdx, current, index) => {
          return current.value > array[maxIdx].value ? index : maxIdx;
        }, 0);
        //sdk第二页应用启动总量分布；自定义title
        chartInstance.setOption({
          title: {
            text: array[maxIndex].name ? '{name|' + array[maxIndex].name + '} \n' + '{val|' + array[maxIndex].value.toLocaleString() + '}' + '{unit|' + '次' + '}' : '',
            textStyle: {
              rich: {
                val: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [20, 5, 0, 0]

                },
                name: {
                  fontSize: 22,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [0, 0, 0, 0],
                },
                unit: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [20, 10, 0, 0]
                }
              }
            }
          }
        })
        break;
      case 'TmsFirstPageapplySumId':
        maxIndex = array.reduce((maxIdx, current, index) => {
          return current.value > array[maxIdx].value ? index : maxIdx;
        }, 0);
        break;
      case 'LineBottomRe':
        maxIndex = array.indexOf(Math.max(...array));
        break;
      case 'TmsLineBottomReSecond':
        maxIndex = array.indexOf(Math.max(...array));
        break;
      case 'TmsLineBottomRe':
        maxIndex = array.indexOf(Math.max(...array));
        break;
      case 'TmsLineBottomReSecond7OpenCount':
        maxIndex = array.indexOf(Math.max(...array));
        break;
      case 'TmsLineBottomReSecond7ActiveTerminal':
        maxIndex = array.indexOf(Math.max(...array));
        break;
      case 'TmsFirstLineBottomRe':
        maxIndex = array.indexOf(Math.max(...array));
        break;
      case 'TmsFifhPageapplySumId':
        maxIndex = array.reduce((maxIdx, current, index) => {
          return current.value > array[maxIdx].value ? index : maxIdx;
        }, 0);
        break;
      default:
    }
    chartInstance.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: maxIndex
    })
    //tms激活终端占比取消聚焦效果
    if (props.echartId !== 'TmsFirstPageapplySumId') {
      chartInstance.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: maxIndex
      })
    }

    //图例滑动事件
    chartInstance.on('mousemove', (params) => {
      chartInstance.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: maxIndex
      });
      chartInstance.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      })
      //sdk第二页应用启动总量分布
      if (props.echartId == 'applySumIdSecond') {
        chartInstance.setOption({
          title: {
            text: '{name|' + params.name + '} \n {val|' + params.value.toLocaleString() + '}' + '{unit|' + '次' + '}',
            textStyle: {
              rich: {
                val: {
                  fontSize: 24,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [20, 5, 0, 0]

                },
                name: {
                  fontSize: 22,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [0, 0, 0, 0],
                },
                unit: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [20, 10, 0, 0]
                }
              }
            },
          }
        });
      } else if (props.echartId == 'applySumId') {
        chartInstance.setOption({
          title: {
            text: array[maxIndex].name ? '{name|' + params.name + '} \n' + '{val|' + params.value.toLocaleString() + '}' + '{unit|' + '次' + '}' : '',
            textStyle: {
              rich: {
                val: {
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-35, 33, 0, 0]

                },
                name: {
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-60, 33, 0, 0],
                },
                unit: {
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-35, 33, 0, -30]
                }
              }
            }
          }
        })
      }
    });
    chartInstance.on('mouseout', (params) => {
      chartInstance.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
      //sdk第二页应用启动总量分布
      if (props.echartId == 'applySumIdSecond') {
        chartInstance.setOption({
          title: {
            text: '{name|' + params.name + '} \n {val|' + params.value.toLocaleString() + '}' + '{unit|' + '次' + '}',
            textStyle: {
              rich: {
                val: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [20, 5, 0, 0]

                },
                name: {
                  fontSize: 22,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [0, 0, 0, 0],
                },
                unit: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [20, 10, 0, 0]
                }
              }
            },
          }
        });
      } else if (props.echartId == 'applySumId') {
        chartInstance.setOption({
          title: {
            text: array[maxIndex].name ? '{name|' + params.name + '} \n' + '{val|' + params.value.toLocaleString() + '}' + '{unit|' + '次' + '}' : '',
            textStyle: {
              rich: {
                val: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-35, 33, 0, 0]

                },
                name: {
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-60, 33, 0, 0],
                },
                unit: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#fff',
                  padding: [-35, 33, 0, -30]
                }
              }
            }
          }
        })
      }
    })
  }
};
// 挂载时初始化ECharts实例
onMounted(() => {
  const el = document.getElementById(props.echartId);
  if (el) {
    chartInstance = echarts.init(el);
    chartInstance.setOption(props.options);
    // showTip(props.options)
  }
});


// 监听options的变化，更新ECharts实例
watch(() => props.options, (newOptions) => {
  if (chartInstance) {
    chartInstance.setOption(newOptions);
    setTimeout(() => {
      showTip(newOptions)
    }, 1000)
  }
}, { deep: true });

// 组件卸载前销毁ECharts实例
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>
<style>
.apply-sumid-second-title {
  font-size: 32px;
  font-weight: bold;
}
</style>